{% extends "base.html" %}

{% block title %}账号登录 - 头条自动发文系统{% endblock %}
{% block page_title %}账号登录{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header text-center">
                <h4>
                    <i class="fas fa-sign-in-alt text-primary"></i>
                    头条账号登录
                </h4>
                <p class="text-muted mb-0">请使用头条APP扫码登录</p>
            </div>
            <div class="card-body">
                <!-- 登录状态显示 -->
                <div id="login-status" class="text-center mb-4">
                    {% if account %}
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i>
                        您已登录，当前账号：<strong>{{ account.nickname or account.username }}</strong>
                    </div>
                    {% else %}
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-circle"></i>
                        您尚未登录，请扫码登录头条账号
                    </div>
                    {% endif %}
                </div>
                
                <!-- 二维码区域 -->
                <div id="qr-container" class="text-center mb-4">
                    <div id="qr-loading" class="mb-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">生成二维码中...</span>
                        </div>
                        <p class="mt-2">正在生成登录二维码...</p>
                    </div>
                    
                    <div id="qr-code" style="display: none;">
                        <img id="qr-image" src="" alt="登录二维码" class="img-fluid border rounded" style="max-width: 300px;">
                        <p class="mt-3 text-muted">
                            <i class="fas fa-mobile-alt"></i>
                            请使用头条APP扫描二维码登录
                        </p>
                        <div class="mt-3">
                            <button id="refresh-qr" class="btn btn-outline-primary">
                                <i class="fas fa-sync-alt"></i>
                                刷新二维码
                            </button>
                        </div>
                    </div>
                    
                    <div id="qr-error" style="display: none;" class="text-center">
                        <i class="fas fa-exclamation-triangle fa-2x text-warning mb-3"></i>
                        <p class="text-muted">生成二维码失败，请重试</p>
                        <button id="retry-qr" class="btn btn-primary">
                            <i class="fas fa-redo"></i>
                            重新生成
                        </button>
                    </div>
                </div>
                
                <!-- 登录检查状态 -->
                <div id="login-checking" style="display: none;" class="text-center">
                    <div class="spinner-border text-success" role="status">
                        <span class="visually-hidden">检查登录状态...</span>
                    </div>
                    <p class="mt-2 text-success">检测到扫码，正在验证登录状态...</p>
                </div>
            </div>
            
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-info-circle text-info"></i> 登录说明</h6>
                        <ul class="list-unstyled text-muted small">
                            <li><i class="fas fa-check text-success"></i> 使用头条APP扫码登录</li>
                            <li><i class="fas fa-check text-success"></i> 登录后会自动保存会话</li>
                            <li><i class="fas fa-check text-success"></i> 支持多账号切换</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-shield-alt text-success"></i> 安全保障</h6>
                        <ul class="list-unstyled text-muted small">
                            <li><i class="fas fa-lock text-success"></i> 本地存储Cookie信息</li>
                            <li><i class="fas fa-lock text-success"></i> 不保存账号密码</li>
                            <li><i class="fas fa-lock text-success"></i> 使用官方登录接口</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="text-center mt-4">
            {% if account %}
            <a href="/generate" class="btn btn-gradient btn-lg">
                <i class="fas fa-magic"></i>
                开始生成文章
            </a>
            {% else %}
            <button id="start-login" class="btn btn-primary btn-lg">
                <i class="fas fa-qrcode"></i>
                生成登录二维码
            </button>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    let loginCheckInterval = null;
    let isChecking = false;
    
    // 生成二维码
    function generateQR() {
        $('#qr-loading').show();
        $('#qr-code').hide();
        $('#qr-error').hide();
        
        $.post('/api/generate-qr')
            .done(function(response) {
                if (response.success) {
                    if (response.already_logged_in) {
                        // 已经登录，显示用户信息并跳转
                        showAlert('检测到已登录状态，正在跳转...', 'success');
                        
                        // 立即更新全局用户状态
                        if (typeof updateConnectionStatus === 'function') {
                            // 获取最新的用户信息
                            $.get('/api/connection-status')
                                .done(function(statusResponse) {
                                    if (statusResponse.success && statusResponse.user_info) {
                                        updateConnectionStatus(true, true, '已登录', statusResponse.user_info);
                                    }
                                });
                        }
                        
                        setTimeout(() => {
                            window.location.href = '/generate';
                        }, 1500);
                    } else {
                        // 显示二维码
                        $('#qr-image').attr('src', response.qr_data);
                        $('#qr-loading').hide();
                        $('#qr-code').show();
                        
                        // 开始检查登录状态
                        startLoginCheck();
                    }
                } else {
                    showQRError();
                }
            })
            .fail(function() {
                showQRError();
            });
    }
    
    // 显示二维码错误
    function showQRError() {
        $('#qr-loading').hide();
        $('#qr-code').hide();
        $('#qr-error').show();
    }
    
    // 开始检查登录状态
    function startLoginCheck() {
        if (isChecking) return;
        
        isChecking = true;
        loginCheckInterval = setInterval(function() {
            checkLoginStatus();
        }, 2000); // 每2秒检查一次
    }
    
    // 停止检查登录状态
    function stopLoginCheck() {
        if (loginCheckInterval) {
            clearInterval(loginCheckInterval);
            loginCheckInterval = null;
        }
        isChecking = false;
        $('#login-checking').hide();
    }
    
    // 检查登录状态
    let checkCount = 0;
    const maxChecks = 150; // 最多检查150次（5分钟）
    
    function checkLoginStatus() {
        checkCount++;
        
        // 超时检查
        if (checkCount > maxChecks) {
            stopLoginCheck();
            showAlert('登录检查超时，请重新尝试', 'warning');
            $('#qr-container').show();
            $('#login-checking').hide();
            checkCount = 0;
            return;
        }
        
        $.post('/api/check-login')
            .done(function(response) {
                if (response.success) {
                    // 登录成功
                    stopLoginCheck();
                    showAlert('登录成功！正在跳转...', 'success');
                    
                    setTimeout(function() {
                        window.location.href = '/';
                    }, 1500);
                } else if (response.message !== '等待扫码登录') {
                    // 登录过程中
                    $('#qr-container').hide();
                    $('#login-checking').show();
                }
                
                // 每30次检查显示一次进度
                if (checkCount % 30 === 0) {
                    console.log(`登录检查进度: ${checkCount}/${maxChecks}`);
                }
            })
            .fail(function(xhr, status, error) {
                console.log('登录检查失败:', status, error);
                // 检查失败次数过多时停止
                if (checkCount > 50) {
                    stopLoginCheck();
                    showAlert('网络连接异常，请检查网络后重试', 'danger');
                    checkCount = 0;
                }
            });
    }
    
    // 点击开始登录
    $('#start-login').click(function() {
        generateQR();
        $(this).hide();
    });
    
    // 刷新二维码
    $('#refresh-qr').click(function() {
        stopLoginCheck();
        generateQR();
    });
    
    // 重新生成二维码
    $('#retry-qr').click(function() {
        generateQR();
    });
    
    // 如果已经有账号，隐藏开始登录按钮
    {% if account %}
    $('#start-login').hide();
    $('#qr-container').hide();
    {% else %}
    // 页面加载后自动生成二维码
    setTimeout(function() {
        generateQR();
        $('#start-login').hide();
    }, 1000);
    {% endif %}
    
    // 页面离开时停止检查
    $(window).on('beforeunload', function() {
        stopLoginCheck();
    });
});
</script>
{% endblock %}
